<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
         <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>下单信息</title>
        <link rel="stylesheet" href="<c:url value="/static/wx/css/style.css"/>" />
        <script type="text/javascript" src="<c:url value="/static/wx/js/lib/rem.js"/>"></script>
    </head>
    <body class="befeff4">
        <div id="wrap">
            <div class="wrap_order">
                <div class="wrap_address">
                    <div class="add_address common relative">
                   <a class="block" href="<c:url value="/wx/toAddress"/>?id=${userVo.bId}">
	                        <div class="clearfix">
	                            <i class="address_icon icon fl"></i>
	                            
	                            <c:if test="${userVo.contacts != null }">
	                            	<h2 class="wc80 mr30 fr">地址:${userVo.city}${userVo.area}${userVo.address }</h2><br>
	                                <h3 class="wc80 mt10 mr30 c999 fr">${userVo.contacts }    ${userVo.telephone }</h3>
	                            </c:if>
	                           
	                            <c:if test="${userVo.contacts == null }">
	                                <span class="lh20">新增收货地址</span>
	                            </c:if> 
	                         </div>
	                        <i class="right_icon"></i>
	                   </a>
                    </div>
                </div>
                <div id="wrap_select_all">
	                <div class="wrap_select">
	                    <div class="wrap_date common_list mt10" title="date">
	                        <div class="common  relative">
	                        <!-- <label>取件时间</label><span class="text_date"></span> -->
	                        <label>取件时间</label><input type="text" disabled="disabled" class="input_text text_date" placeholder="请选择取件时间"></input>
	                        <i class="right_icon"></i>
	                        </div>
	                    </div>
	                    <div class="wrap_category common_list mt10" title="category">
	                        <div class="common boder-bottom relative">
	                       <!--  <label>回收类别</label><span class="text_category"></span> -->
	                       <label>回收类别</label><input type="text" disabled="disabled" class="input_text text_category" placeholder="请选择回收类别"></input>
	                        <i class="right_icon"></i>
	                        </div>
	                    </div>
	                    <div class="wrap_goods common_list" title="goods">
	                        <div class="common relative">
	                        <!-- <label>货量范围</label><span class="text_goods"></span> -->
	                        <label>货量范围</label><input type="text" disabled="disabled" class="input_text text_goods" placeholder="请选择货量范围"></input>
	                        <i class="right_icon"></i>
	                        </div>
	                    </div>
	                </div>
                </div>
                <div class="ex_add mt30 tc"><a href="javascript:void(0);" id="add_reclaim"><b class="">+</b> 添加产品</a></div>
            </div>
            <div class="wrap_btn mt110">
                <a href="javascript:void(0)"  class="button" id="submit_btn">立即下单</a>
                <p class="text tc">
                    <input type="checkbox" id="chk_agree" checked="checked" disabled="false"> 阅读并同意
                    
                    <a href="<c:url value="/wx/toService.do"/>?id=${userVo.bId}" id="agreement">《上门回收服务协议》</a>
                </p>
            </div>
            <!--选择时间弹窗开始-->
            <div class="mask" id="mask_date">
            <div class="confirm" id="wrap_date" title="wrap_date">
                <div class="confirm_h"><span class="cancel fl">取消</span> 选择日期范围   <span class="sure fr">确定</span> </div>
                <ul class="confirm_c" id="date_ul">
                </ul>
            </div>
             </div>
            <!--选择时间弹窗结束-->
            <!--回收类别弹窗开始-->
            <div class="mask" id="mask_category">
            <div class="confirm" id="wrap_category" title="wrap_category">
                <div class="confirm_h">
                    <span class="cancel fl">取消</span>
                    选择类别范围<span class="sure fr">确定</span>
                </div>
                <ul class="confirm_c">
                    <c:forEach items="${listCategory }" var="listCategory">
                        <li id="${listCategory.categoryId }">${listCategory.name }</li>
                    </c:forEach>
                </ul>
            </div>
            </div>
            <!--回收类别弹窗结束-->
            <!--货量范围弹窗开始-->
            <div class="mask" id="mask_goods">
            <div class="confirm" id="wrap_goods" title="wrap_goods">
                <div class="confirm_h">
                    <span class="cancel fl">取消</span> 
                    选择货量范围<span class="sure fr">确定</span>
                </div>
                <ul class="confirm_c">
                    <li>20~50kg</li>
                    <li>50~100kg</li>
                    <li>100~200kg</li>
                    <li>200kg以上</li>
                </ul>
            </div>
            </div>
            <!--货量范围弹窗结束-->
            <!--下单成功提示弹窗开始-->
            <div class="msg-succ">
                <img src="<c:url value="/static/wx/img/succ_icon.png"/>" /> <span class="f20">下单成功</span> 
                <p class="mt10">已提交订单，正在派单中</p>
            </div>
            <!--下单成功提示弹窗结束-->
        </div>
        
        <input type="hidden" id="userId"  value="${userVo.bId }"/>
        <script type="text/javascript" src="<c:url value="/static/wx/js/lib/jquery-3.3.1.min.js"/>" ></script>
        <script type="text/javascript">
            var title_;
            var text_;
            var data_name;
            var id_;
            $(document).ready(function(){
            	//初始化时间
				initDate();
				//过期时间禁用
				$("#wrap_date li").each(function(){
					var index_ = $(this).index();
					if( index_ < 3){
						var myDate = new Date();//获取系统当前时间
						var nowTime = myDate.getHours(); 
						var time_ = parseInt($(this).text().split(" ").pop().split("-").pop());
						if(time_ <= nowTime){
							$(this).addClass("c999");
							$(this).removeAttr('onclick');
							$(this).on("click",function(){
								return false;
							})
						}
					}
				})
				//点击蒙版关闭弹层
				$(".mask").on("click",function(){
					$(this).hide();
				})
				//阻止事件冒泡
				$(".confirm").on("click",function(e){
					var ev = e || event;
					ev.stopPropagation();
					return false;
				})
                //增加品类
                $(".ex_add").on("click","#add_reclaim",function(){
                	/* var len_ = $(".wrap_select").length;
					var text_date = $(".text_date").text();
					var text_category = $(".text_category").text();
					var text_goods = $(".text_goods").text(); */
					var htmlStr = "";
						htmlStr += '<div class="wrap_select">';
						htmlStr += ' <div class="wrap_category common_list mt10" title="category">';
						htmlStr += ' 	<div class="common boder-bottom relative">';
						/* htmlStr += ' 	<label>回收类别</label><span class="text_category"></span>'; */
						htmlStr += ' 	<label>回收类别</label><input type="text" disabled="disabled" class="input_text text_category" placeholder="请选择回收类别" ></input>';
						htmlStr += ' 	<i class="right_icon"></i>';
						htmlStr += ' 	</div>';
						htmlStr += ' </div>';
						htmlStr += ' <div class="wrap_goods common_list" title="goods">';
						htmlStr += ' 	<div class="common relative">';
						/* htmlStr += ' 	<label>货量范围</label><span class="text_goods"></span>'; */
						htmlStr += ' 	<label>货量范围</label><input type="text" disabled="disabled" class="input_text text_goods" placeholder="请选择货量范围"></input>';
						htmlStr += ' 	<i class="right_icon"></i>';
						htmlStr += ' 	</div>';
						htmlStr += ' </div>';
						htmlStr += ' </div>';
					/* if(len_<2&&text_date&&text_category&&text_goods){ */
						$("#wrap_select_all").append(htmlStr);
					/* } */
                    //点击显示弹窗
                    $(".wrap_select").on("click",".common_list",function(){
                        var that = this;
                            title_ = $(that).attr("title");
                        $(".common_list").each(function(){
                            var index_ = $(this).index;
                            var data_ = "data"+index_;
                            $(that).attr({"data":data_});
                            data_name = $(that).attr({"data":data_});
                        })
                        showConfirm();
                    })
                })
                
                $(".wrap_select").on("click",".common_list",function(){
                    var that = this;
                        title_ = $(that).attr("title");
                    $(".common_list").each(function(){
                        var index_ = $(this).index;
                        var data_ = "data"+index_;
                        $(that).attr({"data":data_});
                        data_name = $(that).attr({"data":data_});
                    })
                    showConfirm();
                })
                
                $("span.sure").on("click",function(){
                	
                    data_name.children().find("input").val(text_);
                    data_name.children().find("input").attr({"id":id_});
                    $(".mask").hide();
                    $(".confirm_c li").removeClass("on");
                    text_ = "";
					id_ = "";
                })
                
                $("span.cancel").on("click",function(){
					$(".mask").hide();
				})
                
                //底部弹窗列表选择
                $(".confirm_c").on("click","li",function(){
                     text_ = $(this).text();
                     id_ = $(this).attr("id");
                    $(this).addClass("on").siblings("li").removeClass("on");
                })
                
                var flag = false;//设置一个对象来控制是否进入AJAX过程
                
                $("#submit_btn").on("click",function(){
					//日期
					var text_date = $(".text_date").val().split(" ");
						text_date.splice(1,1);
					    text_date = text_date.join(" ");
					//类别
					var text_category = [];
					//范围
					var text_goods = [];
					
					var userId = $("#userId").val();
					
					var bool = true;
					
					$(".text_category").each(function(){
						var text_ = $(this).val()
						var str_ = $(this).attr("id");
						if(!text_){
							alert("回收类别不能为空");
							bool = false;
						}else{
							text_category.push(str_);
						}
					})
					
					$(".text_goods").each(function(){
						var str_ = $(this).val();
						if(!str_){
							alert("货量范围不能为空");
							bool = false;
						}else{
							text_goods.push(str_);
						}
					})
					
					if(!text_date){
						alert("日期不能为空");
						bool = false;
					}
					
					/* if(text_category.length==0){
						alert("回收类别不能为空");
						bool = false;
					}
					
					if(text_goods.length==0){
						alert("货量范围不能为空");
						bool = false;
					}*/
					console.log(text_category);
					console.log(text_goods); 
					if(bool == true){
						//if(flag) return; //如果正在提交则直接返回，停止执行
	                	//flag = true;//标记当前状态为正在提交状态
	                	var f = arguments.callee, self = this;
				        $(self).unbind('click', f);  
                        $.ajax({
                            type: "post",
                            url: "<c:url value="/wx/toAdd.do"/>",
                            data: {
                            	pickTime : text_date,
                            	categoryStr : text_category,
                            	weightStr : text_goods,
                            	userId : userId
                            },
                            cache: true, 
                            async:false, 
                            dataType: "json",
                            success: function(data){
                                if (data.msg == "1") {
                                	$(".msg-succ").show();
                                    setTimeout(go(userId), 3000)
                                }else{
                                	$(self).click(f);
                                }
                                //flag =false; //在提交成功之后将标志标记为可提交状态
                            }
                        });
                    }
				})
            })
            
            /*******************************/
            var currDT;
            var aryDay = new Array("日", "一", "二", "三", "四", "五", "六"); //显示星期
            var lastDay; //页面显示的最后一天
            var firstDay; //页面显示的第一天
            var date = new Date; //获取完整日期
            var year = date.getFullYear(); //获取当前年份
            //初始化日期加载
            function initDate() {
                currDT = new Date();
                var dw = currDT.getDay(); //从Date对象返回一周中的某一天(0~6)
                var tdDT; //日期
                var objTB = document.getElementById("#date_ul");
                for (var i = 0; i < 7; i++) {
                    tdDT = getDays()[i];
            
                    dw = tdDT.getDay(); //星期几
                    var strHtml="";
                    strHtml += '<li>'+ (tdDT.getMonth() + 1) + "月" + tdDT.getDate() + "日 星期" + aryDay[dw] +" 8:00-12:00" +'</li>';
			        strHtml += '<li>'+ (tdDT.getMonth() + 1) + "月" + tdDT.getDate() + "日 星期" + aryDay[dw] +" 12:00-16:00" +'</li>';
			        strHtml += '<li>'+ (tdDT.getMonth() + 1) + "月" + tdDT.getDate() + "日 星期" + aryDay[dw] +" 16:00-20:00" +'</li>';
                    $("#date_ul").append(strHtml);
                }
                //重新赋值
                lastDay = getDays()[6]; //本周的最后一天
                firstDay = getDays()[0]; //本周的第一天
            }
            //取得当前日期一周内的某一天
            function getWeek(i) {
                var now = new Date();
                var n = now.getDay();
                var start = new Date();
                start.setDate(now.getDate() - 1 + i); //取得一周内的第一天、第二天、第三天...
                return start;
            }
            
            //取得当前日期一周内的七天
            function getDays() {
                var days = new Array();
                for (var i = 1; i <= 7; i++) {
                    days[i - 1] = getWeek(i);
                }
                return days;
            }
            
            //显示弹窗
            function showConfirm(){
                if(title_=="date"){
                    $("#mask_date").show().siblings(".confirm").hide();
                }
                if(title_=="category"){
                    $("#mask_category").show().siblings(".confirm").hide();
                }
                if(title_=="goods"){
                    $("#mask_goods").show().siblings(".confirm").hide();
                }
            }
            function go(userId){
                window.location.href = "<c:url value="/wx/toOrderList.do"/>?id="+userId;
            }

        </script>
    </body>
</html>
